<template>
    <div class="div1">
      <div class="div2">
        <div class="div3">
          <h3>《贷款结清证明》</h3>
        </div>
        <div class="div4">
            <span class="text">[{{ list }}]</span>（身份证号码：<span class="text">[{{list}}</span>]）于<span class="text"><span class="text"></span>[{{ list }}年{{list}}月{{list}}日]</span>向广东宝坤网络小额贷款有限公司申请了一笔贷款，贷款合同编号为<span class="text">[{{list}}]</span>，贷款金额为人民币[小写：<span class="text">{{list}}</span>元，大写<span class="text">{{list}}整</span>]，贷款期限自<span class="text">[{{list}}年{{list}}月{{list}}日]</span>至<span class="text">[{{list}}年{{list}}月{{list}}日]</span>。
          <br />
          <br>
          截至[<span class="text">{{ list }}年{{ list }}月{{ list }}日</span>]，借款人已按照贷款合同约定，足额偿还了该笔贷款的全部本金、利息及相关费用，贷款已全部结清。
          <br />
          经核实，上述贷款已全额结清，借款人不再对该笔贷款承担任何还款责任。特此证明。
          <br />
          本证明仅用于证明[<span class="text">{{ list }}</span>]在广东宝坤网络小额贷款有限公司的贷款已结清，不作其他用途。
          <br>
          <br>
          <br>
          <div class="div5">
            贷款机构名称：广东宝坤网络小额贷款有限公司 
            <br />
            证明出具日期： {{ list }}年{{ list }} 月{{ list }} 日
            <br />
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { onMounted, ref } from "vue";
  const list = ref("");
  onMounted((list.value = "123456"));
  </script>
  <style lang="less" scoped>
  .div1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div2 {
    width: 470px;
  }
  .div3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .div4 {
    font-size: 12px;
    line-height: 24px;
    position: relative;
  }
  .div5 {
    width: 55%;
    text-align: left;
    position: absolute;
    bottom: -60px;
    right: 0;
  }
  .text {
    text-decoration: underline;
  }
  </style>
  